import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text } from '@tarojs/components'
import './index.scss'

class AddressSelectorResultItem extends Component {
  static propTypes = {
    curIndex: PropTypes.number,
    detail: PropTypes.string,
    city: PropTypes.string,
    area: PropTypes.string,
    onClick: PropTypes.func,
  }

  static defaultProps = {
    curIndex: 0,
    detail: '桐庐科技孵化园',
    city: '杭州市',
    area: '桐庐县',
  }

	onClick = () => {
    const { onClick } = this.props
    onClick && onClick()
	}

  render() {
    const { curIndex, detail, city, area } = this.props
    return (
			<View
        className={`addressselector-result-item ${curIndex % 2 === 0 ? 'white' : 'grey'}`}
        hoverClass="base-hover"
				onClick={() => {
					this.onClick()
				}}
			>
        <View className="detail">{detail}</View>
        <View className="city-area">
          <Text className="city">{city}</Text>
          {/* <Text className="area">{area}</Text> */}
        </View>
      </View>
		)
  }
}

export default AddressSelectorResultItem
